<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body{
            font-size: 16px;
        }
        td{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <hr>
            <div>
                <img src="img/4.jpg" height="150px" style="margin-left: 300px">
            </div>
            <input type="text" placeholder="请输入城市名" v-model="city" @keyup.enter="alterCity">
            <button @click="alterCity" class="btn btn-info">确定</button>
            <h2>温馨提示：{{hint}}</h2>
            <table class="table table-hover table-striped">
                <tr>
                    <th>日期</th>
                    <th>天气</th>
                    <th>最高温</th>
                    <th>最低温</th>
                    <th>风向</th>
                </tr>
                <tr v-for="day in weather">
                    <td>{{day.date}}</td>
                    <td>{{day.type}}</td>
                    <td>{{day.high}}</td>
                    <td>{{day.low}}</td>
                    <td>{{day.fengxiang}}</td>
                </tr>
            </table>
        </div>
    </div>


    <script>
        var app = new Vue({
            el:"#app",
            data:{
                city:"",
                weather:[],
                hint:""
            },
            methods:{
                //改变某城市的天气预报
               alterCity:function () {
                    var that = this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (response) {
                        that.weather = response.data.data.forecast;
                        that.hint = response.data.data.ganmao;
                    },function (err) {})
               }
            }
        })
    </script>

</body>
</html>